<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="lcx">
    <title>*李彩霞*</title>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background-image: url(image/banner1.jpg);
            box-sizing: border-box;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        
        ul,
        li,
        h1,
        h3 {
            margin: 0;
            padding: 0;
        }
        
        header {
            width: 100%;
            height: 40px;
            text-align: center;
        }
        
        .one {
            width: 200px;
            height: 60px;
            line-height: 60px;
        }
        
        .one img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            float: left;
        }
        
        .one span {
            float: left;
            color: green;
            margin-left: 10px;
        }
        
        nav {
            width: 100%;
            padding-left: 10px;
        }
        
        nav h3 {
            margin: 0;
            padding: 0;
            color: black;
        }
        
        nav a {
            text-decoration: none;
            color: blue;
        }
        nav a:hover{
            color: black;
            font-size: 40px;
        }
        nav ul li {
            list-style: none;
        }
        
        nav .nav-content_one {
            width: 400px;
            height: 400px;
            float: left;
            background-image: url(image/htl2.jpg);
            background-repeat: no-repeat;
            background-size: 400px 400px;
            text-align: center;
            border: 1px solid yellow;
            border-radius: 50%;
            line-height: 40px;
            box-shadow: 40px 20px palevioletred;
        }
        
        nav .nav-content_two {
            width: 600px;
            height: 600px;
            float: right;
            background-image: url(image/htl3.jpg);
            background-repeat: no-repeat;
            background-size: 600px 600px;
            text-align: center;
            border: 1px solid yellow;
            border-radius: 50%;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <header>
        <h1>个人主页</h1>
    </header>
    <div class="one">
        <span>头像</span>
        <img src="image/tx.png" alt="">
    </div>
    <nav>
        <div class="nav-content_one">
            <h3>项目列表</h3>
            <ul>
                <li><a href="小米官网/index.html">一、小米官网手机版</a></li>
                <li><a href="千图网/index.html">二、千图网</a></li>
                <li><a href="小米商城PC端/index.html">三、小米官网PC端完整版</a></li>
            </ul>
        </div>
        <div class="nav-content_two">
            <h3>作业列表</h3>
            <ul>
                <li><a href="练习1/index.html">一、动态换肤</a></li>
                <li><a href="0214练习/index.html">二、下拉菜单</a></li>
                <li><a href="选择器练习/index.html">三、选择器练习</a></li>
                <li><a href="简易选项卡/index.html">四、0217JQ版简易选项卡</a></li>
                <li><a href="0217-JQ版下拉菜单/index.html">五、0217-JQ版下拉菜单</a></li>
                <li><a href="0218作业-鼠标放上去显示遮罩层/index.html">六、0218-鼠标放上去显示遮罩层</a></li>
                <li><a href="0218-JQ版轮播图/index.html">七、0218-JQ版轮播图</a></li>
                <li><a href="JQ版轮播图续/index.html">八、JQ版轮播图续</a></li>
                <li><a href="弹窗/index.html">九、弹窗</a></li>
                <li><a href="图片切换/index.html">十、图片切换</a></li>
                <li><a href="图片翻转/index.html">十一、图片翻转</a></li>
                <li><a href="检测用户输入字数/index1.html">十一、检测用户输入字数</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>